<template>
    <div class="Grid">
        <!-- <TreeFilter></TreeFilter>   -->
        <div class="table-box">
            <div class="headerBar">

            </div>
            <ProTable :isShowSearch="false" :staffInfoData="staffInfoData" @openDoor="openDoor" @openAddDoor="openAddDoor">
                <!-- 表格 header 按钮 -->
                <template #tableHeader>
                    <el-button type="primary" @click="opendialog" :icon="CirclePlus">新增商品</el-button>
                    <!-- <el-button type="primary" :icon="Upload" plain>批量添加员工</el-button> -->
                    <!-- <el-button type="primary" :icon="Download" plain >导出用户数据</el-button> -->
                </template>
            </ProTable>
        </div>
    </div>

    <el-dialog v-model="centerDialogVisible" title="添加商品" width="500" center>
        <el-scrollbar>
            <el-form ref="ruleFormRef" label-width="100px" :model="reformData" label-suffix=" :" :rules="rules">

                <el-form-item label="商品类别" prop="cat_id">
                    <el-select v-model="reformData.cat_id" placeholder="请选商品类别" clearable>
                        <el-option v-for="item in goodsCategory1Data" :key="item.categoryName" :label="item.categoryName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="商品名称" prop="goodsName">
                    <el-input v-model="reformData.goodsName" placeholder="请填商品名称" clearable></el-input>
                </el-form-item>

                <el-form-item label="商品图片" prop="goodsImg">
                    <ImageUpload ref="clearImg" @getImgurl="getImgurl"></ImageUpload>
                </el-form-item>
                <el-form-item label="商品状态" prop="isShow" validate-event="true">
                    <el-select v-model="reformData.isShow" placeholder="请选商品状态" clearable>
                        <el-option v-for="item in goodsStatus" :key="item.value" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>



                <el-form-item label="商品价格" prop="price">
                    <el-space>

                        <el-input-number v-model="reformData.price" :min="0">
                            <template #suffix>
                                <span>RMB</span>
                            </template>
                        </el-input-number>
                    </el-space>
                </el-form-item>
                <el-form-item label="商品库存" prop="stock">

                    <el-input-number v-model="reformData.stock" :step="1" :min="0" />
                </el-form-item>
                <el-form-item label="商品简介" prop="introduction">
                    <el-input v-model="reformData.introduction" placeholder="请输入商品简介" type="textarea" />
                </el-form-item>

            </el-form>
        </el-scrollbar>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="reset(ruleFormRef)">取消</el-button>
                <el-button type="primary" @click="submitgoodsInfo(ruleFormRef)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>

   
</template>
  
<script setup>

import ProTable from "@/components/Protable/goodsList.vue";

import ImageUpload from "@/components/Upload/uImg.vue"

import {  ElMessage } from 'element-plus'


import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { ref, onMounted, computed, watchEffect, getCurrentInstance, onBeforeUnmount, reactive } from "vue"

import { userManage } from "@/stores/user.js"
//   import { mainStore } from "@/stores"

//   let { proxy } = getCurrentInstance()
// //   let mStaff = staffData()
import { goodsInfo } from "@/stores/goodsInfo.js"
import { mainStore } from "@/stores";
let goodsinfo = goodsInfo()
let mStore = mainStore();
//   let mStore = mainStore()
let usermanage = userManage()
//   增加员工的实例
let userY = ref()

//图片属性
let clearImg = ref()

let ruleFormRef = ref()//这是表单属性

//表单数据
let reformData = reactive({
    goodsName: "",//商品名称
    goodsImg: "",//商品图片
    cat_id: "",//商品类别id
    price: 0,//商品价格
    tableware: 0,//不懂是什么
    introduction: "",//商品介绍
    isShow: 1,//该商品是否显示，上架还是下架
    stock: 0,//库存
    id: 0,//商品id，这是用来区别是新增加还是修改的

});

//商品状态
let goodsStatus = reactive([
    {
        name: "下架",
        value: 0,
    },
    {
        name: "上架",
        value: 1,
    },
]);



let rules = reactive({
    goodsName: [
        { required: true, message: '请输入商品的名称', trigger: 'blur' },
    ],
    goodsImg: [
        { required: true, message: '请输入商品图片', trigger: 'blur' },
    ],
    cat_id: [
        { required: true, message: '请选择商品类别', trigger: 'change' },
    ],
    price: [
        { required: true, message: '请设置商品价格', trigger: 'blur' },
        
    ],
    introduction: [
        { required: true, message: '请输商品的简介', trigger: 'blur' },
    ],
    isShow: [
        { required: true, message: '请输商品的状态', trigger: 'change' },
    ],
    stock: [
        { required: true, message: '请设置商品的库存', trigger: 'blur' },
    ],

})



//对话框显示隐藏
const centerDialogVisible = ref(false)


// 分类一的数据
let goodsCategory1Data = computed(() => {
    // console.log(goodsinfo.category1Data, "goodsinfo.category1Data")
    return goodsinfo.category1Data
})


//   // 上传成功的回调
let uploadSuccess = () => {
    usermanage.getUserData()
}


//获取上传的图片 地址
let getImgurl = (e) => {
    // console.log(e, "我是父亲")
    reformData.goodsImg = e
}

//打开对话框
let opendialog = () => {
    centerDialogVisible.value = true
}



//   // 添加新员工数据 
let addStaffData = () => {
    userY.value.acceptParams(true)
}

//   //打开设置员工身份的拉窗  方法是表格中触发的
let openDoor = (e) => {
    centerDialogVisible.value = true

        // console.log(e,"e1")

        reformData.goodsName = e.goodsName
    reformData.goodsImg = e.goodsImg
    reformData.cat_id = e.cat_id
    reformData.price = e.price
    reformData.introduction = e.introduction
    reformData.isShow = e.isShow
    reformData.stock = e.stock
    reformData.id = e.id
 
}


// 上传商品的详情数据
let submitgoodsInfo = (formEl) => {
  if (!formEl) return
   formEl.validate( async (valid, fields) => {
    if (valid) {
        let res = await goodsinfo.addGoodsData(reformData)
       
        if (res.code == 200) {
                reset(formEl)
                goodsinfo.getGoodsData({ shopAddId: mStore.userinfo.shopAddress.id })
                ElMessage({
                    showClose: true,
                    message: res.mess,
                    type: 'success',
                })
            } else {
                ElMessage({
                    showClose: true,
                    message: res.mess,
                    type: 'error',
                })
            }
    } else {
      console.log('error submit!', fields)
    }
  })
}

//重置表单数据
let reset = (formEl) => {
  if (!formEl) return
  centerDialogVisible.value = false

  formEl.resetFields()
  clearImg.value.clearImg()
  reformData.goodsName = ""
    reformData.goodsImg = ""
    reformData.cat_id = ""
    reformData.price = 0
    reformData.introduction =""
    reformData.isShow = 1
    reformData.stock = 0
    reformData.id = 0
}

let openAddDoor = () => {
    userY.value.acceptParams(true)
}

let staffInfoData = computed(() => {
    // return mStaff.staffInfo
    // console.log("啦啦啦啦")
    let res = goodsinfo.goodsDataList.flatMap(category => category.goodsLists || [])
    // console.log(res,"商品数据")
// console.log(goodsDataList,"goodsDataList")
    return res
})

//   //一页多少数据
//   let changeSizePage = (size) => {
//     take.value = size
//     current.value = 1
//     getStatffInfo()
//   }
//   //当前是第几页
//   let changeCurrentPage = (cur) => {

//     current.value = cur
//     getStatffInfo()
//   }

onMounted( async() => {
    // getStatffInfo()
    // staffInfoData = usermanage.userinfo
    // usermanage.getAllShopData()
     goodsinfo.getGoodsData({ shopAddId: mStore.userinfo.shopAddress.id })
     //分类一的数据
    goodsinfo.getcategory1Data({ shopAddId: mStore.userinfo.shopAddress.id })

})

//   onBeforeUnmount(() => {
//     // proxy.$Bus.off("changeCurrentPage", changeCurrentPage)
//     // proxy.$Bus.off("changeSizePage", changeSizePage)
//   })
</script>
  
<style lang="scss" scoped>
.Grid {
    width: 100%;
    display: flex;
    // height: calc(100vh - 142px);

    .table-box {
        width: 100%;
        box-sizing: border-box;
        height: calc(100vh - 142px);
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: auto 1fr;
        margin-left: 5px;

        .headerBar {}

    }
}
</style>

